<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜花配送 - UI原型</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .prototype-container {
            padding: 20px;
        }
        .prototype-item {
            margin-bottom: 40px;
        }
        .prototype-frame {
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .prototype-title {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }
    </style>
</head>
<body class="bg-gray-100">
    <header class="bg-white shadow-md py-4">
        <div class="container mx-auto px-4">
            <h1 class="text-3xl font-bold text-center text-pink-500">鲜花配送网站 - UI原型展示</h1>
            <p class="text-center text-gray-500 mt-2">基于后端功能模块设计的高保真UI原型</p>
        </div>
    </header>

    <div class="container mx-auto px-4 py-8 prototype-container">
        <!-- 原型列表将通过JavaScript动态加载 -->
        <div id="prototype-list" class="flex flex-col gap-10">
            <!-- 原型条目将在这里动态插入 -->
        </div>
    </div>

    <script>
        // 定义所有原型页面
        const prototypes = [
            { 
                title: '首页', 
                file: 'pages/home.html',
                description: '包含导航栏、轮播图、热门商品和分类展示'
            },
            { 
                title: '用户登录', 
                file: 'pages/login.html',
                description: '用户登录界面，支持账号密码登录'
            },
            { 
                title: '用户注册', 
                file: 'pages/register.html',
                description: '新用户注册界面'
            },
            { 
                title: '个人中心', 
                file: 'pages/user-profile.html',
                description: '用户个人信息管理界面'
            },
            { 
                title: '商品列表', 
                file: 'pages/product-list.html',
                description: '商品分类展示，支持筛选和排序'
            },
            { 
                title: '商品详情', 
                file: 'pages/product-detail.html',
                description: '商品详细信息展示，包含图片、价格、描述等'
            },
            { 
                title: '购物车', 
                file: 'pages/cart.html',
                description: '购物车管理界面'
            },
            { 
                title: '结算页面', 
                file: 'pages/checkout.html',
                description: '订单确认和支付界面'
            },
            { 
                title: '订单列表', 
                file: 'pages/order-list.html',
                description: '用户订单历史记录列表'
            },
            { 
                title: '订单详情', 
                file: 'pages/order-detail.html',
                description: '订单详细信息展示'
            },
            { 
                title: '评价列表', 
                file: 'pages/reviews.html',
                description: '商品评价列表展示'
            },
            { 
                title: '提交评价', 
                file: 'pages/add-review.html',
                description: '用户提交商品评价界面'
            },
            { 
                title: '搜索结果', 
                file: 'pages/search.html',
                description: '商品搜索结果展示页面'
            },
            { 
                title: '管理控制台', 
                file: 'pages/admin-dashboard.html',
                description: '管理员控制台首页'
            },
            { 
                title: '商品管理', 
                file: 'pages/admin-products.html',
                description: '管理员商品管理界面'
            },
            { 
                title: '订单管理', 
                file: 'pages/admin-orders.html',
                description: '管理员订单管理界面'
            },
            { 
                title: '用户管理', 
                file: 'pages/admin-users.html',
                description: '管理员用户管理界面'
            }
        ];

        // 动态加载原型
        const prototypeList = document.getElementById('prototype-list');
        
        prototypes.forEach(prototype => {
            const prototypeItem = document.createElement('div');
            prototypeItem.className = 'prototype-item';
            
            prototypeItem.innerHTML = `
                <div class="prototype-title">${prototype.title}</div>
                <p class="text-gray-500 mb-2">${prototype.description}</p>
                <div class="prototype-frame" style="min-height: 500px;">
                    <iframe src="${prototype.file}" width="100%" height="600" frameborder="0"></iframe>
                </div>
            `;
            
            prototypeList.appendChild(prototypeItem);
        });
    </script>
</body>
</html> 